<template>
	<transition name="opa">
		<div class="ctrl-wrap" v-show="ctrlOff" @click.self="c_ctrlShow">
			<transition name="off">
				<div class="ctrl" v-show="ctrlOff">
					<div class="iscroll-wrap">
						<div class="base-map">
							<div class="dxt-wrap" :class="{'cur':!bassMapOff}" @click="c_basemap(0)">
								<img src="./dxt.jpg" alt="" width="100%">
								<p>地形图</p>
							</div>
							<div class="dlt-wrap" :class="{'cur':bassMapOff}" @click="c_basemap(1)">
								<img src="./dlt.jpg" alt="" width="100%">
								<p>标注图</p>
							</div>
						</div>

						<div class="division">点数据渲染</div>

						<div class="spot-wrap">
							<div>
								<span class="ico">热力图</span>
								<span class="iview-wrap">
		    						<i-switch @on-change="ivi_heat"></i-switch>
		    					</span>
							</div>
							<div>
								<span class="ico">批量点</span>
								<span class="iview-wrap">
		    						<i-switch @on-change="ivi_many"></i-switch>
								</span>
							</div>
							<div>
								<span class="ico">点聚合</span>
								<span class="iview-wrap">
		    						<i-switch @on-change="ivi_together"></i-switch>
								</span>
							</div>
						</div>

						<div class="division">面数据渲染</div>

						<div class="face-wrap">
							<div v-for="(val,inx) in radioValue" @click="c_radioClick(inx)">
								<span class="ico">{{ val.text }}</span>
								<span class="iview-wrap">
									<my-radio :chang="val.checked"></my-radio>
		    					</span>
							</div>
						</div>
					</div>
				</div>
			</transition>
		</div>
	</transition>

</template>

<script>

import ctrl from '../propsCtrl'         // 兄弟组件之间通信的控制器 中央事件总线
import myRadio from '../radio/radio'    // 单选框组件
import IScroll from 'iscroll'
import GIS from '../GIS.js'

export default {
    data(){
        return {
            ctrlOff: false,
            bassMapOff: false,
			radioValue: [
			 	{
			 		text: '排放清单',
					checked: false
				},
				{
					text: '全国预报',
					checked: true
				},
				{
					text: '机动排放',
					checked: false
				},
				{
					text: '分级渲染',
					checked: false
				},
				{
					text: '数据关联',
					checked: false
				}	
			]
        }
    },
	components: {   // 组件
		myRadio
	},
    mounted(){      // vue实例化钩子 组件被挂载钩子
        ctrl.$on("ctrlOffEvent", (state) => {   // 监听事件 使用自定义事件使兄弟组件之间通信
            this.ctrlOff = state
        })


  //       this.$nextTick(() => {
		// 	this.myScroll = new IScroll('.ctrl', {click: true})
		// })

    },
    methods: {   // 方法
        c_basemap(n){
        	n ? this.bassMapOff = true : this.bassMapOff = false   // 控制样式
	        let config = [[{"label": "影像地图","type": "gaodesatellite","visible": true}],[{"label": "普通地图","type": "gaode","visible": true}]]
	        mymap.addBaseMap(config[n])    //添加底图  
	    },
	    c_ctrlShow(){  // 单击遮罩层右侧弹出列表收回
	    	this.ctrlOff = false
            ctrl.$emit("ctrlOffEvent", this.ctrlOff)  // 通过中央事件总线触发自定义事件
	    },
        ivi_heat(status){     // 热力图 
        	status ? GIS.rendererGis() : mymap.removeLayer("heatMap")
        },
        ivi_many(status){     // 海量点
			status ? GIS.graphicGIS() : mymap.removeLayer("point")
        },
        ivi_together(status){ // 点聚合
        	status ? GIS.clusterGis() : mymap.RemoveClusterlayer("clusters") 
        },
        c_radioClick(index){
        	this.radioValue.map((val, inx) => {
        		val.checked = false
        	})
			this.radioValue[index].checked = !this.radioValue[index].checked

			if (index == 0){         // 排放清单
				GIS.removeAllGis()
				// GIS.byOptionGIS()
			} else if (index == 1){  // 全国预报
				GIS.removeAllGis()

			} else if (index == 2){  // 机动排放

			} else if (index == 3){  // 分级渲染

			} else if (index == 4){  // 数据关联

			}
        }
    },
    watch: {      // 监听
    	ctrlOff(){
    		
    		if (!this.myScroll){
	    		setTimeout(() => {
					this.myScroll = new IScroll('.ctrl', {click: true})
				},1000)
    		}

    	}
    }
}
</script>

<style lang="less" scoped>

.off-enter,.off-leave-to{
	transform: translateX(100%);
}
.off-enter-active,.off-leave-active{
    transition: all 0.5s;
}
.off-enter-to,.off-leave{
	transform: translateX(0%);
}

.opa-enter,.opa-leave-to{
	opacity: 0
}
.opa-enter-active,.opa-leave-active{
    transition: all 0.5s;
}
.opa-enter-to,.opa-leave{
	opacity: 1
}


.ctrl-wrap{
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	position: absolute;
	left: 0;
	top: 0;
	.ctrl{
		width: 200px;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		background: #efefef;
		// padding-top: 38px;
		z-index: 10;
		// box-sizing: border-box;
		box-shadow: 0px 0px 10px 2px #192B29;
		overflow: hidden;
		.base-map{
			padding-top: 68px;
			margin: 0px 16px 0 16px;
			overflow: hidden;
			.dxt-wrap{
				width: calc(~"50% - 6px");
				float: left;
				img{
					box-sizing: border-box;
					border: 2px solid #ccc;
					border-radius: 6px;
				}
			}
			.dlt-wrap{
				width: calc(~"50% - 6px");
				float: right;
				img{
					box-sizing: border-box;
					border: 2px solid #ccc;
					border-radius: 6px;
				}
			}
			.cur{
				img{
					border: 2px solid #2bb8aa;
				}
			}
			p{
				color: #2A2A2A;
				font-size: 12px;
				text-align: center;
				line-height: 16px;
			}
		}
		.division{
			margin-top: 20px;
			height: 26px;
			background: #F7F7F7;
			color: #6C6C6C;
			font-size: 12px;
			line-height: 26px;
			padding-left: 16px;
			color: #2A2A2A;
		}
		.spot-wrap{
			padding: 0 16px;
			&>div{
				margin: 12px 0;
				overflow: hidden;
				.ico{
					display: inline-block;
					height:38px;
					padding-left:50px;
					background: url('./back.png');
					background-size:38px;
					background-repeat: no-repeat;
					color: #2A2A2A;
					font-size: 14px;
					line-height: 38px;
					float: left;
				}
				.iview-wrap{
					display: inline-block;
					float: right;
					margin-top: 7px;

				}
			}
			&>div:nth-child(1) .ico{
				background-position: 0 0;
			}
			&>div:nth-child(2) .ico{
				background-position: 0 -38px;
			}
			&>div:nth-child(3) .ico{
				background-position: 0 -77px;
			}
		}

		.face-wrap{
			padding: 0 16px 10px 16px;
			&>div{
				margin: 12px 0;
				overflow: hidden;
				.ico{
					display: inline-block;
					height:38px;
					padding-left:50px;
					background: url('./back2.png');
					background-size:38px;
					background-repeat: no-repeat;
					color: #2A2A2A;
					font-size: 14px;
					line-height: 38px;
					float: left;
				}
				.iview-wrap{
					display: inline-block;
					float: right;
					margin-top: 7px;
				}
			}
			&>div:nth-child(1) .ico{
				background-position: 0 0;
			}
			&>div:nth-child(2) .ico{
				background-position: 0 -38px;
			}
			&>div:nth-child(3) .ico{
				background-position: 0 -75px;
			}
			&>div:nth-child(4) .ico{
				background-position: 0 -113px;
			}
			&>div:nth-child(5) .ico{
				background-position: 0 -151px;
			}
		}

	}
}



</style>